<!--  -->
<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="98px"
    >
      <el-form-item label="厂家名称" prop="producerName">
        <el-input
            v-model="queryParams.data.producerName"
            placeholder="请输入厂家名称"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
            v-model="queryParams.data.keywords"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="厂家电话" prop="producerTel">
        <el-input
            v-model="queryParams.data.producerTel"
            placeholder="请输入厂家电话"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryParams.data.status"
            placeholder="可用状态"
            clearable
            size="small"
            style="width: 180px">
          <el-option label="正常" value="0"></el-option>
          <el-option label="异常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="queryParams.data.dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"

        >搜索
        </el-button
        >
        <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery">重置
        </el-button>
        <el-button type="success"
                   icon="el-icon-plus"
                   size="mini"
                   v-has="'stock:producter:add'"
                   @click="showAdd">添加
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->

    <!--        表格 -->
    <el-table
        :data="goods"
        border
        size="small"
        :header-cell-style="{textAlign: 'center',fontSize:'14px'}"
        :cell-style="{ textAlign: 'center',fontSize:'14px' }">
      <el-table-column
          prop="producerId"
          label="商家编号"
          fixed="left">
      </el-table-column>
      <el-table-column
          prop="producerName"
          label="商家名称"
          min-width="120"
          fixed="left">
      </el-table-column>
      <el-table-column
          prop="producerCode"
          min-width="120"
          label="商家编码">
      </el-table-column>
      <el-table-column
          prop="producerPerson"
          min-width="120"
          label="联系人">
      </el-table-column>
      <el-table-column
          prop="producerTel"
          min-width="120"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="keywords"
          min-width="120"
          label="关键字">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="status"
          min-width="120"
          fixed="right"
          label="状态">
        <template slot-scope="scope">
          <el-tag
              v-if="scope.row.status==0"
              type="success">
            正常
          </el-tag>
          <el-tag
              v-else
              type="warning">
            异常
          </el-tag>
        </template>
<!--        <template v-slot="{row}">-->
<!--          <div v-for="item in statusOptions" :key="item.dictValue" :disabled="row.status===1">-->
<!--                        <span v-if="item.dictValue === row.status">-->
<!--                            {{ item.dictLabel }}-->
<!--                        </span>-->
<!--          </div>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          label="操作"
          min-width="120"
      >
        <template v-slot="{row}">
          <el-button
              type="primary"
              size="small"
              v-has="'stock:producter:update'"
              @click="showEdit(row)">
            编辑
          </el-button>
          <!--admin角色拥有此权限-->
          <el-button
              type="danger"
              size="small"
              v-has="'stock:producter:delete'"
              @click="deleteE(row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <el-pagination
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!--    <%&#45;&#45;    添加    编辑&#45;&#45;%>-->
    <el-dialog title="添加厂家信息" @close="employeeData = {}" :visible.sync="dialogFormVisible">
      <el-form ref="employeeData" :model="employeeData" label-width="80px" :rules="rules">
        <el-form-item label="厂家名称" prop="producerName">
          <el-input v-model="employeeData.producerName" name="producerName"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="producerCode">
          <el-input v-model="employeeData.producerCode"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="producerPerson">
          <el-input v-model.number="employeeData.producerPerson" name="producerPerson"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="producerTel">
          <el-input v-model.number="employeeData.producerTel" name="producerTel"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input v-model="employeeData.keywords"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="producerAddress">
          <el-input v-model="employeeData.producerAddress"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="employeeData.status" placeholder="状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSubmit('employeeData')">{{ employeeData.id ? '修改' : '保存' }}
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      statusOptions: [{id: 0, name: "正常"}, {id: 1, name: "禁用"}],
      goods: [],
      rules: {
        producerName: [
          {required: true, message: "厂家名称不能为空", trigger: "blur"},
        ],
        producerTel: [
          {required: true, message: "联系电话不能为空", trigger: "blur"},
          {
            pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        keywords: [
          {required: true, message: "查询关键字不能为空", trigger: "blur"},
        ],
      },
      employeeData: {},
      dialogFormVisible: false,


      //厂家所有信息表单
      queryParams: {
        pageNo: undefined,//当前页码
        //每页的大小
        pageSize: undefined,//每页的个数
        data:{},
        /*data:{
          producer_name:undefined,//厂家名称
          producer_tel:undefined,//厂家电话
          keywords:undefined,//关键字
          dateRange:undefined,//创建时间
          status:undefined,//状态
        },
        producer_name:undefined,//厂家名称
        producer_tel:undefined,//厂家电话
        keywords:undefined,//关键字
        dateRange:undefined,//创建时间
        status:undefined,//状态*/
      },
      pageNo: 1,
      //每页的大小
      pageSize: 5,
      total: 0,

      queryForm: []
    }
  },
  // 初始化加载数据
  created() {
    this.loadTable()
    // this.$http.get("/producer/getStatus").then(result => {
    //   console.log(result)
    //   this.statusOptions = result.data.data;
    // })
  },

  methods: {
    // 刷新
    handleQuery() {
      this.loadTable();
    },
    // 重置
    resetQuery() {
      this.queryParams = {};
      this.loadTable();
    },

    // 编辑
    showEdit(row) {
      return this.$http.get("/producer/queryById?id=" + row.producerId).then(result => {
        // console.log(result.data)
        this.employeeData = result.data.data;
        this.employeeData.rid = Number(this.employeeData.rid);
        this.dialogFormVisible = true;
      })
    },
    // 删除
    deleteE(row) {
      this.$http.delete("/producer/deleteById?id=" + row.producerId).then(result => {
        //判断状态码
        if (result.data.code == 200) {
          this.loadTable();
          // 提示消息
          this.$notify({
            title: '成功',
            message: "删除成功",
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: "删除失败",
          });
        }
      })
    },

    // 添加
    showAdd() {
      this.dialogFormVisible = true;
    },
    // 确认修改和保存
    // 保存提交
    async saveSubmit(formName) {
      try {
        await this.$refs[formName].validate();
        const empData = await this.$http.post("/producer/add", this.employeeData);
        await this.loadTable();
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
      } catch (error) {
        this.$message.error("操作失败：" + error.message);
      }
    },


    // 分页
    loadTable() {
      this.queryParams.pageNo = this.pageNo;
      this.queryParams.pageSize = this.pageSize;
      this.$http.post("/producer/queryByPage", this.queryParams).then(res => {
        //console.log(res);
        //console.log(res.data)
        this.goods = res.data.data.list;
        this.total = res.data.data.total;

      })
    },


    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新查询
      this.loadTable();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.pageNo = val;
      // 重新查询
      this.loadTable();
    },


  }
}
</script>

<style scoped>

</style>
